<template>
  <div class="businessInfo">
    <header>
        商家详情
    </header>
    <div class="up">
        <ul v-for="item in businessInfo" :key="item.businessId">
            <li><img :src="item.businessImg"></li>
            <li><h3 >{{ item.businessName }}</h3></li>
            <li><p>￥{{ item.startPrice }}起送 ￥{{ item.psPrice }}配送</p></li>
            <li><span>各种炸鸡、鸡块</span></li>
        </ul>
    </div>
    <div class="down">
        <ul>
            <li v-for="item in foodList" :key="item.foodId">
                <div class="left">
                    <img :src="item.foodImg">
                </div>
                <div class="right">
                    <h3>{{item.foodName}}</h3>
                    <div>
                        <span>新鲜猪肉</span>
                        <div class="cart_func">
                            <i @click="delCart(item.foodId)" class="fa fa-minus-circle" v-show="item.num>0"></i>
                            <p v-text="item.num"></p>
                            <i @click="addCart(item.foodId)" class="fa fa-plus-circle"></i>
                        </div>
                    </div>
                    <p>￥{{ item.foodPrice }}</p>
                </div>
            </li>
        </ul>
    </div>
    <footer>
        <div class="footer_left">
            <div class="icon">
                <i class="fa fa-shopping-cart" @click="toCartDetails()"></i>
                <div v-show="numSum>0" class="cart_icon_mark">{{ numSum }}</div>
                <!-- <div class="cart-left-icon-quantity" v-show="numSum>0">{{numSum}}</div> -->
            </div>
            <div class="cart_info">
                <p >￥{{ money }}</p>
                <p>另需配送费3元</p>
            </div>
        </div>
        <div class="footer_right" @click="InfoToPayMent(businessInfo.businessName)">
            <span>去结账</span>
        </div>
    </footer>
  </div>

</template>

<script>
export default {


    data(){
        return{
            userId:1,
            businessId:this.$route.query.businessId,
            businessInfo:[],
            foodList:[],
            cartList:[],
        }
    },
    mounted(){
        this.businessInfo=[
            {
                    businessId:1,
                    businessImg:'/img/dcfl01.png',
                    businessName:'麦当劳',
                    startPrice:20,
                    psPrice:2,
            },
        ]
        this.getFoodList(this.businessId);
        this.getCartList();
        this.isCartFood();
        
    },
    methods:{
        InfoToPayMent(){
            this.$router.push('/payment');
        },
        toCartDetails(businessName){
            this.$router.push({path:'/cartDetails',
            query:{cartList:JSON.stringify(this.cartList),
                foodList:JSON.stringify(this.foodList)},
                    // businessInfo:JSON.stringify(this.businessInfo)
                    },
        
                );
        },

        getCartList(){
            this.getCartList=[
                // {
                // cartId:1,
                // businessId:1,
                // userId:1,
                // foodId:1,
                // quantity:2
                // },
            ]
        },
        //通过商家id获取商品信息
        getFoodList(businessId){
            let foodListTemp = [
                {
                    foodId:1,
                    foodImg:'/img/dcfl01.png',
                    foodName:'汉堡',
                    foodMsg: "好吃的汉堡",
                    foodPrice:20,
                    businessId:1
                },
                {
                    foodId:2,
                    foodImg:'/img/dcfl02.png',
                    foodName:'鸡排',
                    foodMsg: "好吃的鸡排",
                    foodPrice:15,
                    businessId:1
                },
                {
                    foodId:3,
                    foodImg:'/img/dcfl03.png',
                    foodName:'鸡米花',
                    foodMsg: "好吃的鸡米花",
                    foodPrice:8,
                    businessId:1
                },
                {
                    foodId:4,
                    foodImg:'/img/dcfl04.png',
                    foodName:'鸡肉卷',
                    foodMsg: "好吃的鸡肉卷",
                    foodPrice:15,
                    businessId:1
                },
                {
                    foodId:5,
                    foodImg:'/img/dcfl05.png',
                    foodName:'炸鸡',
                    foodMsg: "好吃的炸鸡",
                    foodPrice:30,
                    businessId:1
                },
                {
                    foodId:6,
                    foodImg:'/img/dcfl06.png',
                    foodName:'蜜汁鸡',
                    foodMsg: "好吃的蜜汁鸡",
                    foodPrice:30,
                    businessId:2
                },
            ]
            for(let i = 0;i<foodListTemp.length;i++){
                if(foodListTemp[i].businessId == businessId){
                    this.foodList.push(foodListTemp[i]);
                }
            }
        },
        //判断当前用户是否将商家的食品添加到购物车
        isCartFood() {
            for (let i = 0; i < this.foodList.length; i++) {
                    this.foodList[i].num = 0;
                    for (let k = 0; k < this.cartList.length; k++) {
                        if (this.foodList[i].foodId == this.cartList[k].foodId) {
                            this.foodList[i].num = this.cartList[k].quantity;
                            break;
                        }
                    }
                }
            },

        addCart(foodId){
            let cartItem={id:"",businessId:this.businessId,
            userId:this.userId,foodId:foodId,quantity:1}
            if(this.cartList.length==0){
                this.cartList.push(cartItem);
            }else{
                let i;
                for(i = 0;i<this.cartList.length;i++){
                    if(this.cartList[i].foodId==foodId){
                        this.cartList[i].quantity += 1;
                        break;
                    }
                }
                if(i == this.cartList.length){
                    this.cartList.push(cartItem);
                }
            }
            console.log(this.cartList.length);
            this.isCartFood()
        },

        delCart(foodId){
            let i;
            for(i = 0;i<this.cartList.length;i++){
                if(this.cartList[i].foodId==foodId){
                    this.cartList[i].quantity -= 1;
                    break;
                }
            }
            console.log(this.cartList.length);
            this.isCartFood()
        }

    },
    computed:{
        numSum(){
            let sum = 0;
            for(let i = 0;i<this.cartList.length;i++){
                sum = sum + this.cartList[i].quantity;
            }
            return sum;
        },
        money(){
            let money = 0;
            for(let i = 0;i<this.cartList.length;i++){
                for(let k = 0;k<this.foodList.length;k++){
                    if(this.cartList[i].foodId == this.foodList[k].foodId){
                        money += this.cartList[i].quantity*this.foodList[k].foodPrice;
                    }
                }
            }
            return money;
        }
    }


}
</script>

<style scoped>

.businessInfo{
    width: 100%;
    position: relative;
    padding-bottom: 14vw;
}

.businessInfo header{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: bisque;
    font-size: 4.8vw;
    height: 12vw;
    color: white;
    font-weight: 700;
}


.businessInfo .up{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.businessInfo .up  ul{
    margin: 1vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.businessInfo .up  ul li{
    margin: 1vw;
}

.businessInfo .up  ul img{
    width: 35vw;
    height: 35vw;
    border-radius: 5px;
}

.businessInfo .up  ul p{
    font-size: 3vw;
    display: flex;
    justify-content: center;
}

.businessInfo .up  ul span{
    font-size: 3vw;
    display: flex;
    justify-content: center;
}
.businessInfo .down ul li{

    display: flex;
    justify-content: left;
    align-items: center;
}


.businessInfo .down .left img{
    width: 18vw;
    height: 18vw;
    margin: 0 1vw;
}


.businessInfo .down .right{
    width: 18vw;
    height: 18vw;
    margin: 1vw 1vw;
    width: 100%;
}

.businessInfo .down .right div{
    display: flex;
    margin: 1vw 0vw;
    justify-content: space-between;
    align-items: center;
}

.businessInfo .down .right div{
    display: flex;
    margin: 1vw 0vw;
    justify-content: space-between;
    align-items: center;
}


.businessInfo .down h3{
    font-size: 3.8vw;
}
.businessInfo .down span{
    font-size: 2.8vw;
}

.businessInfo .down i{
    font-size: 5.5vw;
    /* color: #0097EF; */
    color: bisque;
    cursor: pointer;
    margin-right: 1vw;
}


.businessInfo .down p{
    font-size: 2.8vw;
}



.businessInfo footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.businessInfo footer .footer_right{
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: #38CA73;
    color: #fff;
    font-size: 4vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.businessInfo footer .footer_right span{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14vw;
}


.businessInfo footer .footer_left{
    height: 14vw;
    flex: 2;
    background-color: #505051;
    display: flex;
    padding-left: 2vw;
}

.businessInfo footer .footer_left .icon{
    width: 16vw;
    height: 16vw;
    box-sizing: border-box;
    color: #fff;
    position: relative;
    background-color: #3190E8;
    border-radius: 8vw;
    border: solid 1.6vw #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7vw;
    margin-top: -4vw;
    margin-left: 3vw;
}

.businessInfo footer .footer_left .icon i{
    position: absolute;
    font-size: 10vw;
}

.businessInfo footer .footer_left .icon .mark{
    font-size: 4.8vw;
}

.businessInfo footer .cart_info p:first-of-type{
    font-size: 4.5vw;
    color: #fff;
    margin-top: 1vw;
}


.businessInfo footer .cart_info p:last-of-type{
        font-size: 2.8vw;
    color: #AAA;
}
.cart_icon_mark{
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
    width: 5vw;
    height: 5vw;
    border-radius: 2.5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart_func i:last-of-type{
    margin-left: 1vw;
}



</style>